<template>
  <view>
    <view class="box-bg" v-bind:style="{'padding-top':allHeight+'rpx'}">
      <image v-bind:src="info.Class_imgPath" mode="" class="tuku" v-if="info" @error="imageError()"></image>
      <uni-nav-bar left-icon="left" @clickLeft="goBack" color="#333">
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
          <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" v-model="searchName"
            @confirm="confirm" />
          <text v-if="searchName" class="icon_close" @click="closeFn">×</text>
        </view>
      </uni-nav-bar>
      <view class="dota-info" v-if="info">
        <view class="img-box">
          <image v-bind:src="info.Class_imgPath" mode=""></image>
          <text>{{info.Class_name}}</text>
        </view>
        <view class="btn-sc" v-if="info.IsCollected  == 0" v-on:click="_AddCollectedRPG">
          点击收藏
        </view>

        <view class="btn-sc" v-if="info.IsCollected  == 1" v-on:click="_RemoveCollectedRPG">
          已收藏
        </view>
        <!--  <view class="sc">
          进入地图
        </view> -->
        <!--      <view class="product-num">
          {{`${info.Class_GoodsCount[0].Desc}(${info.Class_GoodsCount[0].Count})`}}
        </view> -->
      </view>
      <view class="changeTab">
        <view class="changeTab-item" v-on:click="changeTabFn(0)" v-bind:class="{'changeTab-item-cur':flagId == 0}"
          v-if="common_shop>0">
          {{`普通商品(${common_shop})`}}
        </view>
        <view class="changeTab-item" v-on:click="changeTabFn(128)" v-bind:class="{'changeTab-item-cur':flagId == 128}"
          v-if="order_shop>0">
          {{`定制商品(${order_shop})`}}
        </view>

      </view>
      <view class="qf_filterBarWrapper" style="position: relative;">
        <!--        <view class="screen" :style="modelFlag2 ? '' : 'display:none;'">
          <text v-for="(item,index) in info.Class_GoodsInfo" v-bind:key="index"
            v-bind:class="{'scroll-view_H_item_cur':cid == item.Class_id}" @click="changeCid(item.Class_id)">
            {{item.Class_name}}({{item.Goods_count}})
          </text>
        </view> -->
        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'weight' && tabType == '' }"
          @click="tabChange('weight')">
          综合
        </view>
        <view class="qf_filterBarWrapper-item" v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'sale'}"
          @click="tabChange('sale')">
          销量
        </view>
        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'priceup' || sortName == 'pricedown'}"
          @click="tabChange('价格')">
          <text>价格</text>
          <uni-icons v-bind:type="typePrice" size="10">
          </uni-icons>
        </view>
        <view class="qf_filterBarWrapper-item" v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'uptime'}"
          @click="tabChange('uptime')">
          上架时间
        </view>
        <!--        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'weight' && tabType == 'check'}"
          @click="tabChange('分类')">
          分类
          <uni-icons type="list" size="10">
          </uni-icons>
        </view> -->
      </view>
    </view>
    <view class="dota-main">
      <view class="dotaLts">
        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :top="topNum">
          <!-- 加载列表 -->
          <view class="dotaLts-item" v-for="(item,index) in dataList" v-bind:key="index" @click="gotoDetail(item)">
            <text class="news-sm" v-if="(item.Goods_flag & 8) == 8"></text>
            <text class="hot-sm" v-if="(item.Goods_flag  & 16) == 16"></text>
            <text class="rec-sm" v-if="(item.Goods_flag & 512) == 512"></text>
            <image lazy-load v-bind:src="item.Goods_imgPath" mode="aspectFill"></image>
            <view class="product-info">
              <view class="product-name">
                {{item.Goods_disName}}
              </view>
              <!--  <view class="product-desc">
                <text>所属分类:</text><text>{{item.Class_name}}</text>
              </view> -->
              <view class="product-desc">
                {{item.Goods_profile.length>23 ? item.Goods_profile.substring(0,23)+'……':item.Goods_profile}}
              </view>
              <view class="product-tags" v-show="item.IsDiscount">
                限时折扣
              </view>
              <view class="product-price">
                <text><text class="product-price-type">￥</text>{{item.Goods_price}}<text
                    class="product-price-status">{{item.Unit}}</text>
                  <text v-show="item.IsDiscount"
                    style="text-decoration:line-through;font-size: 26rpx;font-weight: 500;color: #999999;margin-left:10rpx;">
                    ￥{{item.Goods_Original_price}}
                    <text style="font-size:20rpx;font-weight: 500;color: #999999;">{{item.Unit}}</text>
                  </text>
                </text>
                <text class="gm" @click.stop="buyNow(item)"></text>
              </view>
            </view>
          </view>
          <!-- 加载列表 -->
        </mescroll-uni>
      </view>
    </view>
   <view class="goods_nav_tips" :style="{ bottom: bottomOption + 'px' }" v-show="dataList.length<20">
      <text class="kefu_tx"></text> 
      <text class="wenzi">如订单支付或者物品发放有问题，请提交订单反馈</text>
      <text class="link-kefu" @tap="gotoMyOrderView">联系客服</text>
   </view>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import checkLogin from '@/mixins/checkLogin.js'
  import md5 from "js-md5"
  export default {
    mixins: [MescrollMixin, checkLogin],
    data() {
      return {
        titleBarHeight: 0,
        statusBarHeight: 0,
        allHeight: 0,
        info: '',
        cid: '',
        flagId: 0,
        searchName: '',
        sortName: 'weight',
        pi: 1,
        ps: 10,
        dataList: [],
        total: 0,
        type: '',
        typePrice: 'bottom',
        tabType: '',
        modelFlag2: false,
        common_shop: 0,
        order_shop: 0,
        topNum: 500,
        autoBack: '',
        soamaFlag:false,
        bottomOption:0
      };
    },
    onLoad(options) {
      if (options.scene) {
        this.soamaFlag=true;
        const scene = decodeURIComponent(options.scene);
        var jsonStr = '{"' + scene.replace(/ /g, '", "').replace(/=/g, '": "') + '"}';
        this.cid = JSON.parse(jsonStr).cid;
        if (JSON.parse(jsonStr).autoBack) {
          this.autoBack = JSON.parse(jsonStr).autoBack
        }
      } else {
         this.soamaFlag=false;
        this.cid = options.cid;
        if (options.autoBack) {
          this.autoBack = options.autoBack
        }
      }
      let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
            2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          this.titleBarHeight = navHeight;
          this.statusBarHeight = res.statusBarHeight;
          this.allHeight = this.titleBarHeight + this.statusBarHeight;
        },
        fail(err) {
          console.log(err);
        }
      })

      this._ClassInfoByCid();
      const { safeAreaInsets } = uni.getSystemInfoSync()
      this.bottomOption=safeAreaInsets?.bottom;

    },
    methods: {
      closeFn() {
        this.searchName = ''
      },
      gotoMyOrderView() {
        uni.navigateTo({
          url: '/subpkg/my_order/my_order'
        })
      },
      // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
      onShareAppMessage(res) {
        return {
          title: this.info.Class_name + '地图商店',
          path: `/subpkg/rpg_view/rpg_view?cid=${this.cid}&autoBack=1`,
          imageUrl: `https:${this.info.Class_imgPath}`
        }
      },
      // 自定义页面的分享到朋友圈
      onShareTimeline(res) {
        return {
          title: this.info.Class_name + '地图商店',
          path: `/subpkg/rpg_view/rpg_view?cid=${this.cid}&autoBack=1`,
          imageUrl: `https:${this.info.Class_imgPath}`
        }
      },
      imageError() {
        this.info.Class_imgPath = 'https://img.5211game.com/Base/xiaochengxu/static/noimg.jpg';
      },
      goBack() {
        if (this.autoBack == 1 || this.soamaFlag == true) {
          uni.switchTab({
            url: `/pages/home/home`
          })
        } else {
          uni.navigateBack({
            delta: 1
          })
        }

      },
      confirm() {
        this._seachFlagPager();
      },
      //商品内容
      async _ClassInfoByCid() {
        console.log(111)
        var uid = 0;
        if (uni.getStorageSync('userinfo')) {
          uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        } else {
          uid = 0;
        }
        const signMd5 = md5(`Bid=65&classId=${this.cid}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=querywebclassinfobycid&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,classId:this.cid})}`
        )
        console.log(result)
        const {
          data: res
        } = result;
        if (res.code == 0) {
          this.info = res.data;
          //debugger
          if (res.data.Class_GoodsCount) {
            res.data.Class_GoodsCount.map((item, index) => {
              if (item.Desc == '普通商品') {
                this.common_shop = item.Count
              } else if (item.Desc == '定制商品') {
                this.order_shop = item.Count;
              }
            })
            console.log(11, this.common_shop, this.order_shop)
          }
        }
      },
      async _AddCollectedRPG() {
        if (!uni.getStorageSync('userinfo'))
          return uni.$showMsg('请先登录!');

        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&classId=${this.cid}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=addcollectedrpg&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,classId:this.cid})}`
        )
        const {
          data: res
        } = result;
        if (res.code == 0) {
          uni.$showMsg('收藏成功!');
          this._ClassInfoByCid();
        } else {
          uni.$showMsg('收藏失败!');
        }
      },
      async _RemoveCollectedRPG() {
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&classId=${this.cid}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=removecollectedrpg&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,classId:this.cid})}`
        )
        const {
          data: res
        } = result;
        if (res.code == 0) {
          uni.$showMsg('取消收藏成功!');
          this._ClassInfoByCid();
        } else {
          uni.$showMsg('取消收藏失败!');
        }

      },
      //搜索列表
      _seachFlagPager() {
        uni.$http.get(
          `/query/QueryWebGoodsBySeachFlagPager?classid=${this.cid}&flag=${this.flagId}&search=${escape(this.searchName)}&sort=${this.sortName}&pi=${this.pi}&ps=${this.ps}`
        ).then(({
          data: res
        }) => {
          console.log(res);
          if (res.code == 0) {
            if (this.pi == 1) {
              this.dataList = [];
            }
            this.total = res.data.count;
            this.dataList = [...this.dataList, ...res.data.list];
            this.mescroll.endBySize(res.data.list.length, res.data.count);
            setTimeout(() => {
              this.mescroll.endSuccess(res.data.list.length);
            }, 20)

          } else {
            uni.$showMsg(res.msg)
          }
        })
      },
      upCallback(page) {
        this.pi = page.num;
        this._seachFlagPager();
      },
      tabChange(val) {
        if (val == 'weight') {
          this.sortName = 'weight';
          this.tabType = ''
          this.searchName = '';

          this.modelFlag2 = false;
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == 'sale') {
          this.sortName = 'sale';
          this.tabType = ''
          this.searchName = '';
          this.modelFlag2 = false;
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == '价格') {
          this.tabType = '';
          this.searchName = '';
          this.modelFlag2 = false;
          if (this.typePrice == 'bottom') {
            this.sortName = 'priceup';
            this.typePrice = 'top'
          } else if (this.typePrice == 'top') {
            this.sortName = 'pricedown';
            this.typePrice = 'bottom'
          }
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == 'uptime') {
          this.tabType = '';
          this.searchName = '';
          this.modelFlag2 = false;
          this.sortName = 'uptime';
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == '分类') {
          //debugger
          this.pi = 1;
          this.sortName = 'weight';
          this.tabType = 'check';
          this.searchName = '';
          this.modelFlag2 = true;

        }

      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.Goods_id
        })
      },
      changeTabFn(val) {
        this.flagId = val;
        this.pi = 1;
        this.sortName = 'weight';
        this.tabType = '';
        this.modelFlag2 = false;
        this._seachFlagPager();
      }
    }
  }
</script>

<style lang="scss">
  $nav-height: 64rpx;
    .goods_nav_tips{
      padding-bottom: 20px;
      position: fixed;
      bottom: 0;
      left: 0;
      width:100%;
      height:50rpx;   
      z-index: 10;
       background-color:rgba(0, 0, 0, 0.5);
         font-size: 26rpx;
         color:#fff;
         display: flex;
         justify-content:flex-start;
         align-items: center;
         padding:10rpx;
       .kefu_tx{
         width:33rpx;
         height:34rpx;
         background: url(https://img.5211game.com/Base/xiaochengxu/static/kefu_tx.png);
         background-size: contain;
       }
       .wenzi{
         margin:0 10rpx;
       }
       .link-kefu{
         width:120rpx;
         height:46rpx;
         line-height:46rpx;
         text-align: center;
         background-color: #ff0000;
         font-size:24rpx;
         color:#fff;
         display: block;
         border-radius: 20rpx;
       }
    }
  .box-bg {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2;

    .tuku {
      width: 100%;
      height: 411rpx;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      -weikit-filter: blur(100px);
      filter: blur(10px);
    }

    .tuku::after {
      content: "";
      display: block;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-top: 30rpx;
      color: #FFFFFF;

      .scroll-view_H_item {
        padding: 10rpx 10rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 0 20rpx;
      }

      .scroll-view_H_item_cur {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        position: relative;
        top: -6rpx;

        &::after {
          content: "";
          position: absolute;
          bottom: -6rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 90rpx;
          height: 6rpx;
          border-radius: 3px;
          background-color: #fff;
        }
      }
    }

    .dota-info {
      padding: 0 22rpx;
      height: 96rpx;
      color: #fff;
      display: flex;
      margin-top: 30rpx;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .btn-sc {
        width: 140rpx;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;
        background: linear-gradient(90deg, #FE7332 0%, #F39804 100%);
        border-radius: 26rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        top: 30rpx;
        right: 20rpx;
      }

      .img-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        image {
          width: 156rpx;
          height: 96rpx;
          border-radius: 8rpx;
        }

        text {
          margin-left: 20rpx;
          font-size: 38rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FEFEFE;
        }

      }

      .product-num {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .uni-navbar__header,
    .uni-navbar__content {
      background-color: transparent !important;
      border-bottom-width: 0px !important;
    }

    .uni-navbar__header-btns {
      width: 60rpx !important;
    }
  }

  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    width: 326rpx;
    background: #F5F5F5;
    opacity: 0.5;
    height: $nav-height;
    border-radius: 32rpx;
    padding: 0 32rpx;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
    position: relative;

    .icon_close {
      font-size: 26rpx;
      color: #333;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20rpx;
      z-index: 1;
    }
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
  }

  .qf_filterBarWrapper {
    width: 100%;
    height: 86rpx;
    line-height: 86rpx;
    display: flex;
    margin-bottom: 20rpx;
    justify-content: space-around;
    background-color: #fff;

    .screen {
      width: 100%;
      border-radius: 0px 0px 12px 12px;
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      top: 86rpx;

      text {
        flex: 20%;
        text-align: center;
        //  padding: 8rpx 20rpx;
        background: #F2F2F2;
        border-radius: 26rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 10rpx;
        margin-bottom: 10rpx;

        &.current {
          background: #fff;
          border: 1rpx solid #FFA000;
          color: #FFA000;
        }
      }
    }

    .qf_filterBarWrapper-item {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .qf_filterBarWrapper-item-current {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFA000;
      font-weight: bold;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 70rpx;
        left: 50%;
        margin-left: -40rpx;
        width: 80rpx;
        height: 6rpx;
        background-color: #FFA000;
      }

      text {
        color: #FFA000 !important;
      }
    }
  }

  .dota-main {
    margin-top: 485rpx;

    .dotaLts {
      width: 100%;

      .dotaLts-item {
        height: 182rpx;
        padding: 20rpx;
        background: #FFFFFF;
        display: flex;
        margin-bottom: 10rpx;
        position: relative;

        .hot-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/hot-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index: 2;
        }

        .rec-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/rec-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index: 1;
        }

        .news-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/news-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index: 3;
        }

        image {
          flex: 1;
          width: 184rpx;
          height: 182rpx;
          border-radius: 8rpx;
        }

        .product-info {
          flex: 2.8;
          padding-left: 20rpx;
          height: 182rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .product-name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #1A1A1A;
            margin-top: 10rpx;
            margin-bottom: 10rpx;
          }

          .product-desc {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin-bottom: 10rpx;
          }

          .product-tags {
            width: 88rpx;
            height: 28rpx;
            text-align: center;
            background: linear-gradient(90deg, #EE8924 0%, #EC632B 100%);
            border-radius: 4rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 10rpx;
          }

          .product-price {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #E33F2A;
            display: flex;
            justify-content: space-between;
            padding-right: 20rpx;

            .gm {
              width: 102rpx;
              height: 44rpx;
              background: url(https://img.5211game.com/Base/xiaochengxu/static/gm.png);
              background-size: cover;
              display: block;
            }

            .product-price-type {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E33F2A;
            }

            .product-price-status {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E33F2A;
            }
          }
        }
      }
    }
  }

  .changeTab {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .changeTab-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 26rpx;
      color: #fff;
      position: relative;
      padding: 0 40rpx;
    }

    .changeTab-item-cur {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 26rpx;
      font-weight: bold;
      color: #FFA000;
      position: relative;
      padding: 0 40rpx;
    }

    .changeTab-item-cur::after {
      content: "";
      width: 80rpx;
      height: 6rpx;
      background-color: #FFA000;
      ;
      border-radius: 6rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 15rpx;
    }
  }
</style>